<ul class="list-group gn-resultview">
  <li class="list-group-item gn-list"
      data-ng-repeat="md in searchResults.records"
      gn-displayextent-onhover=""
      gn-zoomto-onclick=""
      gn-fix-mdlinks="">
    <div class="row">
      <div class="col-md-1">
        <!--Catalog or group Logo-->
        <div class="gn-md-logo">
          <a class="pull-left" ng-if="md.groupWebsite" href="{{md.groupWebsite}}" target="_blank">
            <img ng-src="../..{{md.logo}}"
                alt="{{'siteLogo' | translate}}"
                class="media-object"/>
          </a>
          <a class="pull-left" ng-if="!md.groupWebsite">
            <img ng-src="../..{{md.logo}}"
                alt="{{'siteLogo' | translate}}"
                class="media-object"/>
          </a>
        </div>
      </div>
      <div class="col-md-9">
        <div class="gn-md-title">
          <input gn-selection-md type="checkbox" ng-model="md['geonet:info'].selected"
                 aria-label="{{'clickToSelect' | translate}}"
                 ng-change="change()"/>
          <div class="pull-right gn-md-category"
               data-ng-class="md.category.length > 0 ||
                            md.topicCat.length > 0 ||
                            md.inspirethemewithac.length > 0 ? '' : 'invisible'">
            <span data-translate="">listOfCategories</span>
            <a data-ng-repeat="cat in ::md.category"
               title="{{('cat-' + cat) | translate}}"
               aria-label="{{('cat-' + cat) | translate}}"
               data-ng-href="#/search?_cat={{cat}}">
              <i class="fa">
                <span class="fa gn-icon-{{cat}}"></span>
              </i>
            </a>
            <a data-ng-repeat="t in md.inspirethemewithac track by $index"
               data-ng-href="#/search?inspiretheme={{t.split('|')[1]}}">
              <i class="fa" title="{{t.split('|')[1]}}">
                <span class="fa iti-{{t.split('|')[0]}}"></span>
              </i>
            </a>
            <a data-ng-repeat="t in md.topicCat"
               data-ng-href="#/search?topicCat={{t}}"
               title="{{t | translate}}"
               aria-label="{{t | translate}}">
              <i class="fa" >
                <span class="fa gn-icon-{{t}}"></span>
              </i>
            </a>
          </div>

          <h1>
            <a href=""
               gn-metadata-open="md"
               gn-index="$index"
               gn-records="searchResults.records"
               gn-formatter="formatter.defaultUrl"
               title="{{md.title || md.defaultTitle}}"
               aria-label="{{md.title || md.defaultTitle}}">
              <i class="fa gn-icon-{{md.type[0]}}" title="{{md.type[0] | translate}}"/>
              {{md.title || md.defaultTitle}}</a>
          </h1>
        </div>

        <div class="gn-md-abstract"
             gn-metadata-open="md"
             gn-index="$index"
             gn-records="searchResults.records"
             gn-formatter="formatter.defaultUrl">
          <p class="text-justify"
             dd-text-collapse dd-text-collapse-max-length="350"
             dd-text-collapse-text="{{md.abstract || md.defaultAbstract}}"></p>
          <address ng-if="md.getContacts().resource">{{::md.getContacts().resource}}</address>
        </div>

        <div gn-grid-related
             gn-grid-related-uuid="::md.getUuid()"
             template="../../catalog/views/default/templates/gridRelatedList.html"></div>

        <div class="row gn-md-links">
          <div class="btn-group" ng-if="::links.length > 0">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="fa fa-link"></span>
              {{::links.length}}
              <ng-pluralize count="::links.length"
                            when="{'one': 'link', 'other': 'links'}"></ng-pluralize>
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li ng-repeat="link in ::links" role="menuitem">
                <a href="{{::link.url}}" target="_blank">{{::link.desc}}</a></li>
            </ul>
          </div>

          <div class="btn-group" ng-if="::downloads.length > 0">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="fa fa-download"></span>
              {{::downloads.length}}
              <ng-pluralize count="::downloads.length"
                            when="{'one': 'download', 'other': 'downloads'}"></ng-pluralize>
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li ng-repeat="link in ::downloads" role="menuitem">
                <a href="{{::link.url}}" download="{{::link.desc}}">
                  <span class="fa fa-file-zip-o" ng-if="link.contentType=='application/zip'"></span>
                  {{link.desc || (link.name + ' - ' + link.contentType) }} </a></li>
            </ul>
          </div>

          <div class="btn-group" ng-if="layers.length > 0">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="fa fa-globe"></span>
              {{::layers.length}}
              <ng-pluralize count="::layers.length"
                            when="{'one': 'layer', 'other': 'layers'}"></ng-pluralize>
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li ng-repeat="layer in ::layers" role="menuitem">
                <a href="" ng-click="addToMap(layer)">
                <span class="fa fa-google"
                      ng-if="layer.contentType=='application/vnd.google-earth.kml+xml'"></span>
                <span class="fa fa-globe"
                      ng-if="layer.contentType=='application/vnd.ogc.wms_xml'"></span>
                {{::layer.desc}} </a>
              </li>
              <li class="divider" role="menuitem"></li>
              <li role="menuitem">
                <a href="#">Add all layers</a>
              </li>
            </ul>
          </div>
          <!-- Display the first metadata status (apply to ISO19139 record) -->
          <div data-ng-if="md.status_text.length > 0"
               title="{{md.status_text[0]}}"
               class="gn-status gn-status-{{md.status[0]}} pull-right">{{md.status_text[0]}}
          </div>
          <!--Edit button-->
          <a class="btn btn-default pull-left"
             ng-href="catalog.edit#/metadata/{{md['geonet:info'].id}}">
            <i class="fa fa-pencil"></i>
            <span data-translate="" class="sr-only">edit</span>
          </a>
          <div data-ng-if="md.draft == 'e'"
               title="{{'workingCopy' | translate}}"
               class="gn-workingcopy-status pull-left">
            <i class="fa fa-pencil"></i>
            <span>{{'workingCopy' | translate}}</span>
          </div>
        </div>
      </div>
      <div class="col-md-2 clearfix">
        <!-- Thumbnail -->
        <div class="gn-md-thumbnail">
          <div class="gn-md-no-thumbnail"
               data-ng-if="!md.getThumbnails().list[0].url"></div>
          <img class="gn-img-thumbnail"
               alt="{{md.title || md.defaultTitle}}"
               data-ng-src="{{md.getThumbnails().list[0].url}}"
               data-ng-if="md.getThumbnails().list[0].url"/>

        </div>

      </div>
    </div>
  </li>
</ul>
